<template>
  <div class="box">
    <div class="top">
      <div class="top-1">
          <span class="dzs">待赠送</span>
          <span class="yzs">已赠送</span>
        <div class="top-2"></div>
      </div>
    </div>
    <!-- ////////////// -->
    <div class="content">
      <div class="content-1">
        <img src="/static/imgs_s02/s02_list01.png" alt />
        <div class="content-a">
          <p>小仙女小食套餐</p>
          <span>29元</span>
        </div>
        <button>
          <span>已赠送</span>
        </button>
      </div>

      <div class="content-2">
        <img src="/static/imgs_s02/s02_giftcard06.png" alt />
        <div class="content-a">
          <p>小哥哥小食套餐</p>
          <span>29元</span>
        </div>
        <button>
          <span>已赠送</span>
        </button>
      </div>

      <div class="content-3">
        <img src="/static/imgs_s02/s02_giftcard07.png" alt />
        <div class="content-a">
          <p>小仙女小食套餐</p>
          <span>29元</span>
        </div>
        <button>
          <span>已赠送</span>
        </button>
      </div>
    </div>

    <div class="bottom">
      <p>购买礼品卡</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {
    // let app = getApp()
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.box {
  width: 100%;
}

.top {
  width: 375px;
  height: 29px;
  background: rgba(255, 255, 255, 1);
  border-radius: 3px;
}

.top-1 {
  margin-top: 5px;
}

.top-2 {
  width: 36px;
  height: 2px;
  background: rgba(50, 177, 108, 1);
  margin-left: 260px;
  margin-top: 13px;
}

.dzs {
  font-size: 13px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-left: 85px;
}

.yzs {
  font-size: 13px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  margin-left: 133px;
  color: rgba(50, 177, 108, 1);
}

.content-1 {
  display: flex;
  flex-direction: row;
}

.content-1 img {
  width: 136px;
  height: 82px;
  margin-top: 20px;
}

.content-2 {
  display: flex;
  flex-direction: row;
}

.content-2 img {
  width: 136px;
  height: 82px;
  margin-top: 20px;
}

.content-3 {
  display: flex;
  flex-direction: row;
}

.content-3 img {
  width: 136px;
  height: 82px;
  margin-top: 20px;
}

.content-a {
  display: flex;
  flex-direction: column;
}

.content-a p {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-left: 11px;
  margin-top: 26px;
}

.content-a span {
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-left: 12px;
  margin-top: 13px;
}

button {
  width: 69px;
  height: 27px;
  line-height: 27px;
  background: rgba(220, 220, 220, 1);
  border-radius: 13px;
  margin-left: 37px;
  margin-top: 74px;
}

button span {
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.content {
  margin-left: 13px;
}

.content-2 img {
  margin-top: 22px;
}

.content-2 p {
  margin-top: 29px;
}

.content-3 img {
  margin-top: 24px;
}

.content-3 p {
  margin-top: 31px;
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 375px;
  height: 27px;
  background: rgba(50, 177, 108, 1);
  /* margin-top: 226px; */
  padding-top: 16px;
}

.bottom p {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-left: 151px;
}
</style>
